<template>
  <div class="manage">
    <el-drawer
        title="工单流转流程"
        :visible.sync="drawer"
        size="80%"
        style="text-align: center;font-weight: bold"
        :before-close="handleClose"
        :destroy-on-close="true"
    >
      <div class="drawerContainer">
        <div class="head">
          <el-card shadow="hover">
            <div class="title">
              <div class="icon"></div>
              <span>工单详情</span>
            </div>
            <div class="containerBox">
              <el-table
                  stripe
                  border
                  size="mini"
                  :default-expand-all="true"
                  :data="tableDataDetail"
                  style="width: 100%">
                <el-table-column type="expand" fixed>
                  <template slot-scope="props" >
                    <el-form label-position="left"   class="demo-table-expand">
                      <div>
                      <el-form-item label="标题" style="width: 1116px">
                        <span>{{ props.row.task_title }}</span>
                      </el-form-item>
                      </div>
                      <div>
                      <el-form-item label="场所或施工项目名称"  style="width: 1116px">
                        <span>{{ props.row.task_name}}</span>
                      </el-form-item>
                      </div>
                      <div>
                      <el-form-item label="问题及隐患详情"  style="width: 1116px">
                        <span>{{ props.row.task_content }}</span>
                      </el-form-item>
                      </div>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="工单编号"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="task_title"
                    label="标题"
                    align="center"
                    width="300px"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_inspection_time"
                    label="检查时间"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_anticipate_time"
                    label="规定整改完成时间"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_type__type"
                    label="隐患类型"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="task_type__area"
                    label="隐患领域"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_dept__deptname"
                    label="责任部门"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_dept__safeer__name"
                    label="安全员"
                    align="center"
                >
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.task_dept__safeer__name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="task_dept__depthearder__name"
                    label="负责人"
                    align="center"
                >
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium" type="success">{{ scope.row.task_dept__depthearder__name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    align="center"
                >
                  <template slot-scope="scope">
            <span :style="{color:classObject(scope.row.status)}"
            >
              {{transform(scope.row.status)}}
            </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="task_level"
                    label="风险等级"
                    align="center"
                >
                  <template slot-scope="scope">
            <span :style="{ color: scope.row.task_level ==='一般' ? 'brown' :'red'}"
            >
              {{scope.row.task_level}}
            </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="title">
              <div class="icon"></div>
              <span>隐患照片</span>
            </div>
            <div class="containerBox">
              <div v-for="(item,index) in imageList" :key="index" class="itemBox">
                <el-image
                    style="width: 200px; height: 200px"
                    fit="contain"
                    :src="'http://134.68.156.116:28881/yaq/api/media/'+item.image"
                    :preview-src-list="srcList"
                >
                </el-image>
              </div>
            </div>
            <div class="title">
              <div class="icon"></div>
              <span>整改反馈</span>
            </div>
            <div class="containerBox">
              <el-table
                  stripe
                  max-height="1000px"
                  border
                  size="mini"
                  :data="rectification"
                  style="width: 100%"
              >
                <el-table-column
                    prop="order_date"
                    fixed
                    label="整改时间"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="order_plan"
                    label="反馈内容"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="desc"
                    label="备注"
                    align="center"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="title">
              <div class="icon"></div>
              <span>整改照片</span>
            </div>
            <div class="containerBox">
              <div v-for="(item,index) in imageNewList" :key="index" class="itemBox">
                <el-image
                    style="width: 200px; height: 200px"
                    fit="contain"
                    :src="'http://134.68.156.116:28881/yaq/api/media/'+item.image"
                    :preview-src-list="srcListNew"
                >
                </el-image>
              </div>
            </div>
            <div class="title">
              <div class="icon"></div>
              <span>流转记录</span>
            </div>
            <div class="containerBox">
              <el-table
                  stripe
                  max-height="1500px"
                  border
                  size="mini"
                  :data="data_order"
                  style="width: 100%"
              >
                <el-table-column
                    prop="create_date"
                    fixed
                    label="工单到达时间"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="end_date"
                    label="工单处理时间"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="link"
                    label="环节"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                      <span :style="{ color: classObjectProcedure(scope.row.link)}"
                      >
                        {{transformProcedure(scope.row.link)}}
                      </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="link_status"
                    label="完成情况"
                    align="center"
                >
                  <template slot-scope="scope">
                      <span :style="{ color: scope.row.link_status ===true?'green':'red'}"
                      >
                        {{scope.row.link_status ===true?'已完成':'未完成'}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="handle_user__name"
                    label="处理人"
                    align="center"
                >
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.handle_user__name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="suggestion"
                    label="处理意见"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="result"
                    label="处理结果"
                    align="center"
                >
                  <template slot-scope="scope">
                      <span :style="{ color: scope.row.result ===true?'green':'red'}"
                      >
                        {{scope.row.result ===true?'同意':(scope.row.result ===null?'':'驳回')}}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </div>
    </el-drawer>
    <el-dialog
        title="审核意见"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleCloseDialog"
    >
         <el-form
             ref="checkForm"
             :model="checkForm"
             size="mini"
             label-width="150px"
         >
           <el-form-item label="是否同意：" prop="code" required>
             <el-select v-model="checkForm.code" placeholder="请选择是否同意">
               <el-option
                   v-for="item in opinionList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
               >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="意见：" prop="suggestion">
             <el-input
                 type="textarea"
                 rows="3"
                 placeholder="请输入审批意见"
                 v-model="checkForm.suggestion"
             >
             </el-input>
           </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </span>
    </el-dialog>
    <el-dialog
        title="整改反馈"
        :visible.sync="dialogVisibleAfter"
        width="30%"
        :before-close="handleCloseDialogAfter"
    >
      <el-form
          ref="updateForm"
          :model="updateForm"
          size="mini"
          label-width="100px"
      >
        <el-form-item label="反馈内容：" prop="order_plan" required>
          <el-input
              type="textarea"
              rows="3"
              v-model="updateForm.order_plan"
              placeholder="请输入反馈内容"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="整改照片：" prop="images_after" required>
          <el-upload
              action=""
              ref="uploadImg"
              list-type="picture-card"
              v-loading="uploading"
              :auto-upload="false"
              :file-list="fileList"
              :before-upload="beforeAvatarUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-change="handleFileChange"
              :before-remove="beforeRemove"
              :class="{disabled:uploadDisabled}"
              :limit="6"
              :on-exceed="handleExceed"
          >
             <span :class="{disabled:uploadDisabled}">
                <i  class="el-icon-plus"></i>
              </span>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，</div>
            <div slot="tip" class="el-upload__tip">且单张不超过2MB</div>
          </el-upload>
          <el-dialog :visible.sync="dialogImgVisible">
            <img width="100%" :src="dialogImageUrl" alt="图片未找到">
          </el-dialog>
        </el-form-item>
        <el-form-item label="备注：" prop="desc">
          <el-input
              type="textarea"
              rows="3"
              placeholder="请输入备注"
              v-model="updateForm.desc"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="cancelDia">取 消</el-button>
            <el-button type="primary" @click="submitDia">确 定</el-button>
          </span>
    </el-dialog>
    <el-dialog
        title="审核意见"
        :visible.sync="dialogVisibleCheck"
        width="30%"
        :before-close="handleCloseDialogCheck"
    >
      <el-form
          ref="checkFormHeader"
          :model="checkFormHeader"
          size="mini"
          label-width="150px"
      >
        <el-form-item label="是否同意：" prop="code" required>
          <el-select v-model="checkFormHeader.code" placeholder="请选择是否同意">
            <el-option
                v-for="item in opinionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意见：" prop="suggestion">
          <el-input
              type="textarea"
              rows="3"
              placeholder="请输入审批意见"
              v-model="checkFormHeader.suggestion"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="cancelHeader">取 消</el-button>
            <el-button type="primary" @click="submitHeader">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="审核意见"
        :visible.sync="dialogVisibleCheckLast"
        width="30%"
        :before-close="handleCloseDialogCheckLast"
    >
      <el-form
          ref="checkFormLast"
          :model="checkFormLast"
          size="mini"
          label-width="150px"
      >
        <el-form-item label="是否同意：" prop="code" required>
          <el-select v-model="checkFormLast.code" placeholder="请选择是否同意">
            <el-option
                v-for="item in opinionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意见：" prop="suggestion">
          <el-input
              type="textarea"
              rows="3"
              placeholder="请输入审批意见"
              v-model="checkFormLast.suggestion"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="cancelLast">取 消</el-button>
            <el-button type="primary" @click="submitLast">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <span style="margin-bottom: 1em;font-size: 20px;font-weight: bold">我的待办</span>
      <!--          form搜索区域-->
<!--      <el-form :inline="true" :model="userForm" size="mini">-->
<!--        <el-form-item label="责任部门：" prop="deptname" v-if="isAdmin">-->
<!--          <el-select v-model="userForm.deptname" placeholder="请选择责任部门">-->
<!--            <el-option label="所有部门" value=""></el-option>-->
<!--            <el-option-->
<!--                v-for="item in deptList"-->
<!--                :key="item"-->
<!--                :label="item"-->
<!--                :value="item"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="状态：" prop="status">-->
<!--          <el-select v-model="userForm.status" placeholder="请选择状态">-->
<!--            <el-option-->
<!--                v-for="item in statusList"-->
<!--                :key="item.id"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="success" @click="onSubmit" size="mini">查询</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
    </div>
    <div class="common-table">
      <el-table
          stripe
          height="90%"
          border
          size="mini"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="工单编号"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="task_title"
            label="标题"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_dept__safeer__name"
            label="安全员"
            align="center"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.task_dept__safeer__name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="task_dept__depthearder__name"
            label="负责人"
            align="center"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" type="success">{{ scope.row.task_dept__depthearder__name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="task_name"
            label="场所或施工项目名称"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_content"
            label="问题及隐患详情"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_inspection_time"
            label="检查时间"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_anticipate_time"
            label="规定整改完成时间"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_type__type"
            label="隐患类型"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="task_type__area"
            label="隐患领域"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_dept__deptname"
            label="责任部门"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            align="center"
        >
          <template slot-scope="scope">
            <span :style="{color:classObject(scope.row.status)}"
            >
              {{transform(scope.row.status)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            prop="task_level"
            label="风险等级"
            align="center"
        >
          <template slot-scope="scope">
            <span :style="{ color: scope.row.task_level ==='一般' ? 'brown' :'red'}"
            >
              {{scope.row.task_level}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="200px"
        >
          <template slot-scope="scope">
            <el-button type="success"
                       icon="el-icon-more"
                       size="mini"
                       @click="edit(scope.row.id)">
              详情
            </el-button>
            <el-button type="primary"
                       icon="el-icon-s-tools"
                       size="mini"
                       @click="release(scope.row)">
              {{btnState(scope.row.status)}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginations.current"
            :page-sizes="[5 ,10, 20, 50, 100]"
            :page-size="paginations.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginations.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {deptInfo} from "@/api/dept";
import {handleTask, taskInfo, taskList} from "@/api/task";
import Cookies from "js-cookie";
export default {
  name: "MyToDoList",
  data(){
    return{
      index:'',
      isAdmin:false,
      drawer:false,
      uploading:false,
      uploadDisabled:false,
      dialogImgVisible:false,
      dialogVisibleCheckLast:false,
      dialogImageUrl:'',
      fileList:[],
      data_order:[],
      orderList:[],
      srcList:[],
      imageList:[],
      imageNewList:[],
      rectification:[],
      tableDataDetail:[],
      srcListNew:[],
      opinionList:[
        {
          label:'同意',
          value:1
        },
        {
          label:'驳回',
          value: 0
        }
      ],
      checkForm:{
        code:'',
        suggestion:''
      },
      checkFormHeader:{
        code:'',
        suggestion:''
      },
      checkFormLast:{
        code:'',
        suggestion:''
      },
      deptList:[],
      dialogVisible: false,
      dialogVisibleAfter:false,
      dialogVisibleCheck:false,
      statusList:[
        {
          id:1,
          label:'待发起',
          value:1
        },
        {
          id:2,
          label:'待安保部领导审核',
          value:2
        },
        {
          id:3,
          label:'待安全员接单',
          value:3
        },
        {
          id:4,
          label:'待安全员反馈',
          value:4
        },
        {
          id:5,
          label:'待负责人审核',
          value:5
        },
        {
          id:6,
          label:'待工单发起人审核',
          value:6
        },
        {
          id:7,
          label:'已归档',
          value:7
        }
      ],
      tableData: [],
      paginations: {
        current: 1, //当前页
        pageSize: 10, //一页显示多少条
        total: 0 //数据总数
      },
      userForm: {
        deptname:'',
        status:''
      },
      updateForm:{
        order_plan:'',
        desc:'',
        images_after:[]
      }
    }
  },
  mounted() {
    this.created();
  },
  methods: {
    created() {
      let _this = this;
      deptInfo({}).then(resp=>{
        if(resp.code===1){
          let params = {
            page_number: 1,
            page_size:resp.total_count,
            status: true
          }
          deptInfo(params).then(res=>{
            let temp = res.data
            for(let i = 0;i<temp.length;i++){
              _this.deptList = [..._this.deptList,temp[i].deptname]
            }
            console.log(_this.deptList)
          })
        }
      })
      if(Cookies.get('role') ==='管理员') {
        this.isAdmin = true
        this.userForm.status = 6
        this.statusList = this.statusList.filter(ele=>(ele.value===6))
      }else if (Cookies.get('role') ==='负责人') {
        console.log(222)
        if(Cookies.get('name')==='郭贵平'){
          this.userForm.status = 2
          this.statusList = this.statusList.filter(ele=>(ele.value===2||ele.value===5))
        }else{
          this.userForm.status = 5
          this.statusList = this.statusList.filter(ele=>(ele.value===5))
        }
      }else {
        this.userForm.status = 3
        this.statusList = this.statusList.filter(ele=>(ele.value===3||ele.value===4))
      }
      this.getList()
    },
    // check(status){
    //   if(Cookies.get('role') ==='管理员') {
    //     return status === 6 || status === 7;
    //   }else if(Cookies.get('role') === '负责人'){
    //     if(Cookies.get('name') === '郭贵平'){
    //       return status === 2||status === 5 || status === 7;
    //     }else {
    //       return status === 5 || status === 7;
    //     }
    //   }else {
    //     return status === 3 || status === 4 || status === 7;
    //   }
    // },
    //弹窗关闭的时候
    handleClose (done) {
      this.$confirm('确定关闭吗？')
          .then(()=> {
            this.srcList = []
            this.srcListNew = []
            this.imageList = []
            this.orderList = []
            this.rectification = []
            this.imageNewList = []
            this.data_order = []
            done();
          })
          .catch(()=> {});
    },
    //分页方法
    handleCurrentChange(val) {
      this.paginations.current = val
      this.getList();
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val
      this.getList();
    },
    classObject(status){
      if(status===2) {
        return 'orange'
      }else if(status===3){
        return 'brown'
      }else if(status===4){
        return 'red'
      }else if(status===5){
        return 'blue'
      }else if(status===6){
        return 'purple'
      }else{
        return 'green'
      }
    },
    classObjectProcedure(link){
      if(link===2) {
        return 'orange'
      }else if(link===3){
        return 'brown'
      }else if(link===4){
        return 'red'
      }else if(link===5){
        return 'blue'
      }else if(link===6){
        return 'purple'
      }else{
        return 'green'
      }
    },
    //获取的列表数据
    getList () {
      //获取的列表数据
      let temp = []
      let store = Cookies.get('operation').split(',')
      console.log('store',store)
      for(let i=0;i<store.length;i++){
        temp.push(parseInt(store[i]))
      }
        let params = {
          deptname:"",
          status:temp,
          page_number:this.paginations.current,
          page_size:this.paginations.pageSize
        }
        taskList(params).then(resp => {
          if (resp.code === 1) {
            this.tableData = resp.data
            this.paginations.total = resp.total_count
          }
        })
    },
    //列表的查询
    onSubmit () {
      this.getList()
    },
    transformProcedure(val){
      let list = [
        {
          id:1,
          label:'起草',
          value:1
        },
        {
          id:2,
          label:'安保部领导审核',
          value:2
        },
        {
          id:3,
          label:'安全员接单',
          value:3
        },
        {
          id:4,
          label:'安全员反馈',
          value:4
        },
        {
          id:5,
          label:'负责人审核',
          value:5
        },
        {
          id:6,
          label:'发起人审核',
          value:6
        },
        {
          id:7,
          label:'归档',
          value:7
        }
      ]
      return list.filter(ele=>(ele.value === val))[0].label
    },
    transform(val){
      let list = [
        {
          id:1,
          label:'待发起',
          value:1
        },
        {
          id:2,
          label:'待安保部领导审核',
          value:2
        },
        {
          id:3,
          label:'待安全员接单',
          value:3
        },
        {
          id:4,
          label:'待安全员反馈',
          value:4
        },
        {
          id:5,
          label:'待负责人审核',
          value:5
        },
        {
          id:6,
          label:'待工单发起人审核',
          value:6
        },
        {
          id:7,
          label:'已归档',
          value:7
        }
      ]
      return list.filter(ele=>(ele.value === val))[0].label
    },
    edit(id){
      this.drawer = true
      taskInfo({task_id:id}).then(res=>{
        if(res.code===1){
          let temp = res.data_task[0]
          this.rectification = res.rectification
          this.data_order = res.data_order
          this.tableDataDetail = res.data_task
          console.log(this.rectification)
          this.orderList = [
            {
              label:'工单编号',
              value:temp.id
            },
            {
              label:'标题',
              value:temp.task_title
            },
            {
              label:'发单人',
              value:temp.task_owner__name
            },
            {
              label:'负责人',
              value:temp.task_dept__depthearder__name
            },
            {
              label:'安全员',
              value:temp.task_dept__safeer__name
            },
            {
              label:'隐患类型',
              value:temp.task_type__type
            },
            {
              label:'隐患领域',
              value:temp.task_type__area
            },
            {
              label:'风险隐患等级',
              value:temp.task_level
            },
            {
              label:'检查时间',
              value:temp.task_inspection_time
            },
            {
              label:'规定整改完成时间',
              value:temp.task_anticipate_time
            },
            {
              label:'状态',
              value:this.transform(temp.status)
            },
            {
              label:'场所或施工项目名称',
              value:temp.task_name
            },
            {
              label:'问题及隐患详情',
              value:temp.task_content
            },
          ]
          this.imageList = res.image_before
          for(let i= 0;i<this.imageList.length;i++){
            this.srcList.push('http://134.68.156.116:28881/yaq/api/media/'+this.imageList[i].image)
          }
          this.imageNewList = res.image_after
          for(let j =0;j<this.imageNewList.length;j++){
            this.srcListNew.push('http://134.68.156.116:28881/yaq/api/media/'+this.imageNewList[j].image)
          }
        }
      })
    },
    release(row){
      if(row.status===2){
        this.dialogVisible = true
        Cookies.set('rowId',row.id)
      }else if(row.status===3){
        let params = {
          link:3,
          task_id:row.id
        }
        handleTask(params).then(res=>{
          if(res.code===1){
            this.$message.success(res.message)
            this.getList()
          }else{
            this.$message.success(res.message)
            this.getList()
          }
        })
      }else if(row.status===4){
        this.dialogVisibleAfter = true
        Cookies.set('rowId',row.id)
      }else if(row.status===5) {
        this.dialogVisibleCheck = true
        Cookies.set('rowId',row.id)
      }else{
        this.dialogVisibleCheckLast = true
        Cookies.set('rowId',row.id)
      }
    },
    handleFileChange(file,fileList){
      this.uploadDisabled=(fileList.length>=6)
      this.fileList = fileList
      console.log(file,fileList)
      console.log(this.fileList)
      const imgType = file.raw.type === 'image/jpeg'|| file.raw.type === 'image/png'
      const isLt2MB = file.size / 1024 / 1024 < 2;
      if (!imgType) {
        this.$message.error("上传图片只能是 JPG和png 格式!");
        this.uploadDisabled=(fileList.length>=6)
        console.log(fileList)
        return false
      }
      if(!file.raw){
        this.$message.error("选择图片错误！")
      }
      if (!isLt2MB) {
        this.uploading=true
        this.$message.success("图片大小超过2MB，正在压缩中...");
        setTimeout(() => {
          //代码
          this.uploading=false
        }, 2000);
        let that = this;
        let reader = new FileReader();
        // 将图片将转成 base64 格式
        reader.readAsDataURL(file.raw);
        reader.onloadend = function () {
          let result = this.result;
          console.log(result)
          let img = new Image();
          img.src = result;
          // compressImg.src = file.url;
          console.log(img.src)
          img.onload = function (){
            let maxWidth = 800;
            let maxHeight = 800;
            let originWidth = img.width; //图片原始宽
            let originHeight = img.height; //图片原始高
            // console.log(originWidth)
            // console.log(originHeight)
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d')
            // 目标尺寸
            let targetWidth = originWidth;
            let targetHeight = originHeight;
            if (originWidth > maxWidth || originHeight > maxHeight) {
              if (originWidth / originHeight > maxWidth / maxHeight) {
                // 更宽，按照宽度限定尺寸
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
              } else {
                targetHeight = maxHeight;
                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
              }
            }
            canvas.width = targetWidth
            canvas.height = targetHeight
            // 图片压缩
            ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
            // canvas对图片进行缩放 0.3是我定义的图片质量，
            let base64 = canvas.toDataURL(file.raw.type, 0.3);
            console.log(base64)
            //将base64转换为file流
            let Compressfile= that.convertBase64UrlToFile({
              dataURL: base64,
              type: file.raw.type,
              contentName: file.name
            })
            console.log('压缩后', Compressfile)
            file = {
              id: "compress",//标记图片的唯一性，可按自己方式定义
              url:Compressfile.path,
              file: Compressfile
            };
            setTimeout(function(){
              that.$message.success('已压缩至2MB以下')
            },2000)
            that.updateForm.images_after.push(base64)
            console.log(result.length) //result是返回图片base64格式
            console.log(that.updateForm.images_after)
            console.log(img.width)
            console.log(img.height)
            console.log(Compressfile)
            console.log(file,fileList)
            console.log(that.updateForm.images_after)
            console.log(that.updateForm.images_after[0])
            console.log(that.updateForm.images_after[1])
            console.log(that.updateForm.images_after[2])
            console.log(that.updateForm.images_after[3])
            console.log(that.updateForm.images_after[4])
            console.log(that.updateForm.images_after[5])
          }
        }
      } else {
        //这里写直接上传 转base64
        const self = this;
        let reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = function (e) {
          let img_base64 = e.target.result;
          self.updateForm.images_after.push(img_base64)
          console.log(self.updateForm.images_after)
        }
      }
    },
    convertBase64UrlToFile(base64) {
      let urlData = base64.dataURL
      let type = base64.type
      let contentName = base64.contentName
      let bytes = null
      if (urlData.split(',').length > 1) { //是否带前缀
        bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
      } else {
        bytes = window.atob(urlData)
      }
      // 处理异常,将ascii码小于0的转换为大于0
      let ab = new ArrayBuffer(bytes.length)
      let ia = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i)
      }
      let result = new Blob([ab], {
        type: type,
      })
      let result1 = new File([result], contentName, {
        type: type
      })
      result1.path = window.URL.createObjectURL(result)
      return result1
    },
    handleExceed() {
      this.$message.warning(`只能上传六张图片`);
    },
    beforeRemove(file,fileList) {
      this.index = fileList.indexOf(file)
      console.log('index',this.index)
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    beforeAvatarUpload(file){
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.uploadDisabled=(fileList.length>=6)
      this.updateForm.images_after.splice(this.index,1)
      console.log(this.updateForm.images_after)
    },
    handlePreview(file) {
      console.log(file.size);
      // window.open(file.url)
      this.dialogImageUrl = file.url;
      this.dialogImgVisible = true;
      this.uploadDisabled = true
    },
    btnState(status){
      if(status===2) {
        return '审核'
      }else if(status===3){
        return '接单'
      }else if(status===4){
        return '反馈'
      }else if(status===5){
        return '审核'
      }else if(status===6){
        return '审核'
      }else{
        return '归档'
      }
    },
    handleCloseDialog(done){
      this.$confirm('确认关闭？')
          .then(() => {
            this.checkForm = {}
            done();
          })
          .catch(() => {});
    },
    handleCloseDialogAfter(done){
      this.$confirm('确认关闭？')
          .then(() => {
            this.userForm = {}
            this.fileList=[]
            done();
          })
          .catch(() => {});
    },
    handleCloseDialogCheck(done){
      this.$confirm('确认关闭？')
          .then(() => {
            this.checkFormHeader = {}
            done();
          })
          .catch(() => {});
    },
    handleCloseDialogCheckLast(done){
      this.$confirm('确认关闭？')
          .then(() => {
            this.checkFormLast = {}
            done();
          })
          .catch(() => {});
    },
    cancelLast(){
      this.checkFormLast = {}
    },
    submitLast(){
      console.log('row.id',Cookies.get('rowId'))
      this.$refs.checkFormLast.validate((valid)=>{
        if(valid){
          let params = {
            link:6,
            task_id:Cookies.get('rowId'),
            ...this.checkFormLast
          }
          handleTask(params).then(res=>{
            if(res.code===1){
              this.$message.success(res.message)
              this.checkFormLast = {}
              this.dialogVisibleCheckLast = false
              this.getList()
            }else{
              this.$message.error(res.message)
              this.checkFormLast = {}
              this.dialogVisibleCheckLast = false
              this.getList()
            }
          }).catch(error=>{
              console.log(error)
              this.dialogVisibleCheckLast = false
              this.getList()
          })
        }
      })
    },
    cancelHeader(){
      this.checkFormHeader = {}
    },
    submitHeader(){
      console.log('row.id',Cookies.get('rowId'))
      this.$refs.checkFormHeader.validate((valid)=>{
        if(valid){
          let params = {
            link:5,
            task_id:Cookies.get('rowId'),
            ...this.checkFormHeader
          }
          console.log('params',params)
          handleTask(params).then(res=>{
            if(res.code===1){
              this.$message.success(res.message)
              this.checkFormHeader = {}
              this.dialogVisibleCheck = false
              this.getList()
            }else{
              this.$message.error(res.message)
              this.checkFormHeader = {}
              this.dialogVisibleCheck = false
              this.getList()
            }
          }).catch(error=>{
              console.log(error)
              this.dialogVisibleCheck = false
              this.getList()
          })
        }
      })
    },
    cancelDia(){
      this.updateForm = {}
      this.fileList=[]
    },
    submitDia(){
      console.log('row.id',Cookies.get('rowId'))
      this.$refs.updateForm.validate((valid)=>{
        if(valid) {
          let params = {
            link:4,
            task_id:Cookies.get('rowId'),
            ...this.updateForm
          }
          console.log('params',params)
          handleTask(params).then(res=>{
            if(res.code===1){
              this.$message.success(res.message)
              this.updateForm = {}
              this.dialogVisibleAfter = false
              this.getList()
            }else{
              this.$message.error(res.message)
              this.updateForm = {}
              this.dialogVisibleAfter = false
              this.getList()
            }
          }).catch(error=>{
              console.log(error)
              this.dialogVisibleAfter = false
              this.getList()
          })
        }
      })
    },
    cancel(){
      this.checkForm = {}
    },
    submit(){
      console.log('row.id',Cookies.get('rowId'))
      this.$refs.checkForm.validate((valid)=>{
        if(valid){
          let params = {
            link:2,
            task_id:Cookies.get('rowId'),
            ...this.checkForm
          }
          handleTask(params).then(res=>{
            console.log(res)
            if(res.code===1){
              this.$message.success(res.message)
              this.checkForm = {}
              this.dialogVisible = false
              this.getList()
            }else{
              this.$message.error(res.message)
              this.checkForm = {}
              console.log('this.dialogVisible', this.dialogVisible)
              this.dialogVisible = false
              console.log('this.dialogVisible', this.dialogVisible)
              this.getList()
            }
          }).catch(error=>{
              console.log(error)
              this.dialogVisible = false
              this.getList()
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.manage{
  height: 100%;
  .drawerContainer{
    //text-align: center;
    color: #fff;
    padding: 10px;
    font-size: 25px;
    .head{
      .title {
        display: flex;
        width: 100%;
        font-weight: 600;
        font-size: 15px;
        line-height: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e8e8e8;
        margin-bottom: 15px;
        .icon {
          width: 5px;
          height: 15px;
          background-color: rgb(146, 198, 222);
          margin-right: 5px;
        }
      }
      .containerBox {
        display: flex;
        justify-content: flex-start;
        //align-items: center;
        flex-wrap: wrap;
        margin-bottom: 16px;
        box-sizing: border-box;
        padding: 0 10px;
        .itemBox1 {
          width: 33.3%;
          margin-bottom: 15px;
          font-size: 14px;
          .itemLeft1 {
            color: rgba(0, 0, 0, 0.55);
          }
          .itemRight1 {
            color: rgba(0, 0, 0, 0.95);
          }
        }
        .itemBox {
          width: 33.3%;
          margin-bottom: 15px;
          font-size: 14px;
          .itemLeft {
            color: rgba(0, 0, 0, 0.55);
          }
          .itemRight {
            color: rgba(0, 0, 0, 0.95);
          }
        }
      }
    }
  }
  .el-upload__tip{
    color: orangered;
  }
  .manage-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dotted lightgrey;
  }
  .common-table{
    margin-top: 20px;
    position: relative;
    height: 90%;
    .pager{
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}
</style>
<style>
.demo-table-expand {
  /*font-size: 0;*/
  /*margin-left: 15em;*/
  //width: 75%;
  //margin: 0 12.5%;
  width: 100%;
  margin: 20px;
}
.demo-table-expand label {
  width: 11em;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
//padding: 1em;
  margin-right: 0;
  margin-bottom: 0;
  //width: 2000px;
  //width: 33.3%;
  //width: 100%;
}
</style>

